<template>
	<view>
		<u-gap></u-gap>
		<!-- 查 -->
		<view class="Subsection margin  " style="display: flex;justify-content: space-between; ">
			<!-- 单选 -->
			<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
<!-- 				<u-tag :text="item.name" borderColor='#DDDDDD' color='#fff' :plain="!item.checked" :name="index"
					@click="radioClick(index, item.name)">
				</u-tag> -->
				
				
				<u-tag :text="item.name" :plain="!item.checked" size="large"  :name="index"  @click="radioClick(index, item.name)" ></u-tag>
			</view>
		</view>

		<u-gap></u-gap>
		<!-- distance -->
		<view class="margin">
			<view class="list flex justif-between">
				<view :class="val.id === i ? 'text-red' : ''" @click="disHandle(val, i, dis)" v-for="val, i in dis" :key="i">
					{{ val.text }}
				</view>
			</view>
		</view>

		<u-gap></u-gap>
		<!-- 搜索 -->
		<view class="margin" style="margin-top: 1rpx;">
			<!-- search -->
			<u-search @search="searchHandle" :showAction="false" :placeholder="search_pl" v-model="search_wz" :clearabled="true"
				searchIconColor="#7976E9" borderColor="#DDDDDD" bgColor="#ffffff"></u-search>
		</view>
		<u-gap></u-gap>

		<view class="tab1">
			<view class="margin ms20" style="display: none;">
				<view style="overflow: hidden;">
					<view class="item flex-cen" style="float: left; margin-right: 190rpx;">
						<text style="margin-right: 19rpx;">区域</text>
						<image src="/static/img/finddoctor/01-xia.png" alt="" style="width: 18rpx;height: 12rpx;" />
					</view>
					<view class="item flex-cen" style="float: left;margin-right: 200rpx;">
						<text style="margin-right: 19rpx;">排序</text>
						<image src="/static/img/finddoctor/01-xia.png" alt="" style="width: 18rpx;height: 12rpx;"/>
					</view>
					<view class="item flex-cen" style="float: left;">
						<text style="margin-right: 19rpx;">筛选</text>
						<image src="/static/img/finddoctor/01-xia.png" alt="" style="width: 18rpx;height: 12rpx;"/>
					</view>
				</view>
			</view>

			<view>
				<u-popup :show="show" closeable mode="center" @close="close">
					<view class="bg-white" style="width: 600rpx;">
						<u-gap height="30"></u-gap>
						<view class="item1 mt10 justify-center" style="display: flex;">
							<view>
								<image :src="thisHos.uheadPic" style="height: 120px; width: 100px;"></image>
								<text style="text-align: center;display: block;">{{ thisHos.unames }}</text>
							</view>
						</view>
						
						<u-gap height="20"></u-gap>
						<view class="flex flex-col  px-1 " style="display: flex;border: 1rpx dotted gray ;">
							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">医院</text>
									<text class="u-cell-text pl-20">{{ thisHos.ucompname }}</text>
								</view>
							</u-cell>
						
							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">医师资格证号码</text>
									<text class="u-cell-text pl-20">{{ thisHos.ucompname }}</text>
								</view>
							</u-cell>
						
							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">医师执业证号码</text>
									<text class="u-cell-text pl-20">{{ thisHos.ucompname }}</text>
								</view>
							</u-cell>
						
							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">2019-2020年度定期考核</text>
									<text class="u-cell-text pl-20">通过</text>
								</view>
							</u-cell>
						
							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">执业类型</text>
									<text class="u-cell-text pl-20">{{ thisHos.udepartmentname }}</text>
								</view>
							</u-cell>
						
							<u-cell>
								<view slot="title" class="u-slot-title ">
									<text class="u-cell-text pr-2 color_09f">执业范围</text>
									<text class="u-cell-text pl-20">{{ thisHos.udepartmentname }}</text>
								</view>
							</u-cell>
						</view>
						
						<view class="flex flex-center px-10 py-20">
							<u-button class="color_black" type="primary" v-if="showBtn" @click="go(thisHos)" text="进入云诊室"></u-button>
							<u-button class="color_black" type="primary" @click="close" text="关闭"></u-button>
						</view>
					</view>
					
					
				</u-popup>
			</view>

			<!-- 医生列表 -->
			<view class="margin" v-for="(val, i) in doctorList" :key="i" @click="showTc(val)">
				<view class="item1 u-border-bottom mt10" style="display: flex;">
					<view class="mr10 ">
						<image :src="val.uheadPic" alt="" style="width:108rpx;height: 108rpx;border-radius: 50%;"/>
					</view>
					<view class="" style="width: 100%;">
						<u-row :gutter='5'>
							<u-col span="3">
								<view class="demo-layout bg-purple-light">
									<view class="size_16 font_b">{{ val.uname }}</view>
								</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple">
									<view class="size_14">{{ val.utechp }}</view>
								</view>
							</u-col>
						</u-row>
						<u-row class="mt8 ms10">
							<u-col span="8">
								<view class="demo-layout bg-purple-light">
									<view class="size_14 ">{{ val.ucompname }}</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">
									<view class="size_14">{{ val.udepartmentname }}</view>
								</view>
							</u-col>
						</u-row>
						<view class="size_12 color_84 ms20">{{ val.introduction }}</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			showBtn: false,
			thisHos: [],
			mapData: {
				"type": "2",
				"userId": uni.getStorageSync('userInfo').userid,
				"x": uni.getStorageSync('map').x,
				"y": uni.getStorageSync('userInfo').y,
			},
			search_wz: '',
			search_pl: '按医院查',
			/* 单选标签 */
			radios: [{
				name: "按医院查",
				checked: true
			},
			{
				name: "按姓名查",
				checked: false
			},
			{
				name: "按科室查",
				checked: false
			}
			],
			//dis
			dis: [{
				text: '不限范围',
				id: 0
			},
			{
				text: '1000m',
				id: 0
			},
			{
				text: '3000m',
				id: 0
			},
			{
				text: '5000m',
				id: 0
			},
			{
				text: '10000m',
				id: 0
			}
			],
			status: 'nomore',
			// 医生
			doctorList: [],
			/* 搜索 */
			// "compName": "",
			// "employeeName": "",
			// "udepartmentname": "",
			// "distance": 0,
			// "x": 0,
			// "y": 0
			form: {},
			searchStatus: 0,
		};
	},
	onLoad() {
		this.getList()
		this.getGps()
	},
	onShow() {

	},
	methods: {
		async getMap() {
			let that = this
			let re = await this.$API.mapApi.coordinate(this.mapData);
		},
		go(val) {
			this.$pub.go(`/pages_home/createOrder/createOrder?data=${encodeURIComponent(JSON.stringify(val))}`)
		},
		// TODO 
		close() {
			this.show = false
		},
		showTc(val) {
			this.show = true;
			this.thisHos = val;
			console.log(this.thisHos);
			switch (val.applyStatus) {
				case "0":
					this.showBtn = false;
					break;
				case "1":
					this.showBtn = true;
					break;
			}
		},
		getGps(e) {
			let that = this
			uni.getLocation({
				type: 'wgs84',
				/* high */
				accuracy: 'best',
				isHighAccuracy: true,
				highAccuracyExpireTime: 3000,
				success: function (res) {
					let map = {
						x: res.longitude,
						y: res.latitude
					};
					that.mapData.x = res.longitude
					that.mapData.y = res.latitude
					uni.setStorageSync('map', map)
					that.getMap()
				},
				fail: function (err) {
					// console.log(err, "err");
					//失败调用
					checkOpenGPSServiceByAndroid()
				}
			})
		},
		disHandle(item, index, list) {
			/* 变色 */
			this.dis = list.map((m) => {
				m.id = index
				return m
			})
			/*  */
			this.form.distance = Number(item.text)
			this.form.x = uni.getStorageInfoSync('map').x
			this.form.y = uni.getStorageInfoSync('map').y

			console.log(this.form, "this.form");

			/*  */
			this.getList(this.form)
		},
		searchHandle(e) {
			/* content */
			console.log(e, 'e');
			/* 状态 */
			let status = this.searchStatus
			switch (status) {
				case 0:
					this.form.compName = e
					break;
				case 1:
					this.form.employeeName = e
					break;
				case 2:
					this.form.udepartmentname = e
					break;
				default:
					break;
			}
			/* 请求 */
			this.getList(this.form)
			this.form.compName = '';
			this.form.employeeName = ''
			this.form.udepartmentname = ''
		},
		async getList(data = {}) {
			let re = await this.$API.doctorApi.inquiry(data)
			this.doctorList = re
		},
		radioClick(e, name) {
			/* 判断搜索状态 */
			this.searchStatus = e
			this.radios.map((item, index) => {
				item.checked = index === e ? true : false
			})
			this.search_pl = name
		},
	},
}
</script>

<style lang="scss" scoped>
/* #ifdef MP */
::v-deep .u-search__content__input {
	font-size: 28rpx !important;
}
/* #endif */
.color_black {
	color: black;
}

.u-cell-text{
	font-size: 30rpx;
}

/* 更改tag切换颜色 */
// ::v-deep .u-tag--primary {
// 	background-color: #7976E9;
// 	border-color: #7976E9;
// }

// ::v-deep .u-tag--primary span {
// 	color: #FFFFFF;
// 	font-size: 26rpx !important;
// }

.u-page__tag-item {
	// margin-right: 40rpx;
}
</style>